Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added drag functionality in admin tabs #2305

Merged
merged 14 commits into from
Mar 26, 2024
Merged

Conversation

Abhinegi2
Copy link
Contributor

@Abhinegi2 Abhinegi2 commented Mar 19, 2024

closes: #2269

Visible/Frontend Changes

  • Added drag icon on the tabs
  • We can now drag tabs horizontally
  • Created a sort function to drag tabs
  • overall self testing

Description of changes

  1. Import Drag and Drop Modules: Added imports for drag and drop functionality from @angular/cdk/drag-drop. This allows you to use Angular's built-in drag-and-drop features for reordering tabs.
  2. Added cdkDropList and cdkDrag directives to enable drag-and-drop functionality.
  3. HTML file changes -
  • Wrapped the tab content inside a div with cdkDropList directive to make it a drop target for dragging tabs.
  • Added drag handle icon for each tab
  • Added cddDropListConnectedTo directive to specify which drop lists are considered connected. This allows tabs to be dragged between different instances of the component if needed.
  • Utilized cdkDragLockAxis to lock the dragging movement along the x-axis.
  1. Added Drag and Drop Logic to the Component.ts file
  2. Created a method getAllTabs to generate an array of IDs for all tabs.
  3. Implemented a drop method to handle the drop event and update the order of tabs.
  4. Ensured that the selected tab is still active after dropping the active tab.
  5. Used JSON.stringify and JSON.parse for Angular Ivy render bugs that are occurring when updating the tabs array.

@Abhinegi2 Abhinegi2 added the Type: Feature new user-facing feature label Mar 19, 2024
@Abhinegi2 Abhinegi2 self-assigned this Mar 19, 2024
Copy link

Deployed to https://pr-2305.aam-digital.net/

@Abhinegi2 Abhinegi2 requested a review from sleidig March 20, 2024 07:40
@Abhinegi2 Abhinegi2 marked this pull request as draft March 20, 2024 08:05
@Abhinegi2 Abhinegi2 removed the request for review from sleidig March 20, 2024 08:06
Copy link
Member

@sleidig sleidig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works fairly well :-)

  • The handle is not shown properly for the active tab yet: Screenshot from 2024-03-20 09-12-27

  • Also, the drop preview (how the element is displayed during dragging, while not lifting the mouse yet) is showing the moved element on top of the next one rather than to the side, but I am not sure how difficult this is to fix as all of that is in the mat-tab layouts.

  • when I drag the currently active tab, after dropping it suddenly another (the new first tab) is selected. The selected tab should ideally remain active

A thought about usability overall, now that I see it in action: What do you think about only making the current active tab draggable (with the handle next to the title form field)? Then there would be a bit less complexity in the UI overall, with less drag handles

@sleidig sleidig marked this pull request as ready for review March 22, 2024 13:24
@Abhinegi2 Abhinegi2 requested a review from sleidig March 22, 2024 13:47
@sleidig sleidig merged commit b454f5c into master Mar 26, 2024
6 of 7 checks passed
@sleidig sleidig deleted the enhancements/draggable-tabs branch March 26, 2024 13:36
@aam-digital-ci
Copy link
Collaborator

🎉 This PR is included in version 3.34.2-master.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@aam-digital-ci aam-digital-ci added the released on @master managed by CI (semantic-release) label Mar 26, 2024
@aam-digital-ci
Copy link
Collaborator

🎉 This PR is included in version 3.34.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

@aam-digital-ci aam-digital-ci added the released managed by CI (semantic-release) label Apr 4, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
released on @master managed by CI (semantic-release) released managed by CI (semantic-release) Type: Feature new user-facing feature
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Form Builder UX (Entity Details drag&drop)
3 participants